<template>
	<view class="container">
		<!-- 顶部面板 -->
		<view class="input-view">
			<uni-icons type="search" size="22" color="#666666" />
			<input v-model="searchVal" confirm-type="search" class="input" type="text" placeholder="物料代码/名称/规格" @confirm="search">
			<uni-icons :color="'#999999'" v-if="searchVal!==''" class="icon-clear" type="clear" size="22" @click="clearSearch" />
		</view>
		<!-- 滚动区域 -->
		<view class="scroll-panel" id="scroll-panel">
			<view class="list-box">
				<view class="left">
					<scroll-view scroll-y="true" :style="{'height':scrollHeight}" :scroll-with-animation="true" >
						<view class="item" 
							v-for="(item,index) in leftArray"
							:class="{ 'active':index==leftIndex }" 
							:id="item.id"
							:data-index="index"
							@tap="leftTap"
						>{{item.name}}</view>
			        </scroll-view>
				</view>
				<view class="main">
					<mescroll-uni :style="{'height':scrollHeight}" :down="downOption" @init="mescrollInit" @emptyclick="downCallback" @down="downCallback" :up="upOption" :bottom="100"
					 @up="upCallback" :fixed="false">
						<view class="mycard">
							<view v-for="item in cardList" :key="item.matid" class="card-item">
								<uni-card is-full>
									<view class="audit-card-content">
										<view class="uni-flex uni-row">
											<view class="flex-item-100">
												{{item.matname}}
											</view>
										</view>
										<view class="uni-flex uni-row">
											<view class="flex-item-20">
												<image style="width: 64rpx; height: 64rpx;" mode="aspectFit" :src="item.imgpath"></image>
											</view>
											<view class="flex-item-80">
												<view class="flex-item-100">{{item.matnum}}</view>
												<view class="flex-item-100">{{item.model}}</view>
											</view>
										</view>
									</view>
								</uni-card>
							</view>
						</view>
					</mescroll-uni>
				</view>
			</view>
		</view>
		<!-- 底部面板 -->
		<view class="bottom-panel">
			<!-- 底部面板，可添加所需要放在页面底部的内容代码。比如购物车栏目 -->
			<view style="background-color: #ffaa00;text-align: center;font-size: 28rpx;padding: 10px 0;color: #fff;">
				<view>可添加需放在页面底部的内容，比如购物车栏目</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapGetters} from 'vuex'
	import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue"
	export default {
		components: {
			MescrollUni,
		},
		data() {
			return {
				scrollHeight:'400px',
				leftArray:[],
				mainArray:[],
				leftIndex:0,
				scrollLeft: 0, // tab标题的滚动条位置
				searchVal: '',
				mescroll: null,
				isPass: false,
				selectedProject: {},
				//是否显示过滤
				showRight: false,
				txtMatClsID: "",
				txtKey: "",
				// 下拉刷新的常用配置
				downOption: {
					use: true, // 是否启用下拉刷新; 默认true
					auto: true, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
				},
				// 上拉加载的常用配置
				upOption: {
					use: true, // 是否启用上拉加载; 默认true
					auto: true, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						tip: '暂无相关数据'
					},
					toTop: {
						src: '/static/img/backtop.png'
					},
					textNoMore: '没有更多数据了',
				},
				cardList: [],
			}
		},
		computed: {
			...mapGetters(['themeBgColor', 'darkMode']),
		},
		mounted(){
			/* 等待DOM挂载完成 */
			this.$nextTick(()=>{
				/* 在非H5平台，nextTick回调后有概率获取到错误的元素高度，则添加200ms的延迟来减少BUG的产生 */
				setTimeout(()=>{
					/* 等待滚动区域初始化完成 */
					this.initScrollView().then(()=>{
						/* 获取列表数据，你的代码从此处开始 */
						this.getListData();
					})
				},200);
			})
		},
		methods: {
			/* 初始化滚动区域 */
			initScrollView(){
				return new Promise((resolve, reject)=>{
					let view = uni.createSelectorQuery().select('#scroll-panel');
					view.boundingClientRect(res => {
						this.scrollHeight = `${res.height}px`;
						this.$nextTick(()=>{
							resolve();
						})
					}).exec();
				});
			},
			/* 获取列表数据 */
			getListData(){
				this.$minApi.Find({
					data: {"_entityid":645,"qualifier":"Forbidden=0","sort":"Number","sortdir":"0","fetchlimit":"100"}
				}).then(res => {
					if (res.Status === 1) {
						// 接口返回的当前页数据列表 (数组)
						let [left,main]=[[],[]];
						let matclsdatas = JSON.parse(res.Data);
						uni.showLoading();
						setTimeout(()=>{
							left.push({id:0,name:`全部`});
							matclsdatas.forEach(matcls=>{
								left.push({id:matcls.ID,name:`${matcls.Name}`});
							});
						},1000);
						uni.hideLoading();
						this.leftArray=left;
						this.mainArray=main;
					} else {
						
					}
				}).catch(exp => {
					// 失败隐藏下拉加载状态
					console.log(exp);
				});
			},
			/* 左侧导航点击 */
			leftTap(e){
				let index=e.currentTarget.dataset.index;
				this.leftIndex=Number(index);
				if(this.mescroll!=null){
					this.mescroll.formdata = {
						txtMatClsID: e.currentTarget.id,
						txtKey: "",
					};
					this.mescroll.resetUpScroll();
				}
			},
			// mescroll组件初始化的回调,可获取到mescroll对象
			mescrollInit(mescroll) {
				// 如果this.mescroll对象没有使用到,则mescrollInit可以不用配置
				this.mescroll = mescroll;
				this.mescroll.formdata = {
					txtMatClsID: "",
					txtKey: "",
				};
			},
			/*下拉刷新的回调, 有三种处理方式: */
			downCallback(mescroll) {
				// 第2种: 下拉刷新和上拉加载调同样的接口, 那以上请求可删, 直接用mescroll.resetUpScroll()代替
				mescroll.resetUpScroll() // 重置列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
			},
			/*上拉加载的回调*/
			upCallback(mescroll) {
				// if (!this.user) {
				// 	mescroll.endErr()
				// 	return
				// }
				// 此时mescroll会携带page的参数:
				mescroll.formdata._code = "M_MAT_001";//移动端物料列表
				mescroll.formdata.pageindex = mescroll.num; // 页码, 默认从1开始
				mescroll.formdata.pagesize = mescroll.size; // 页码, 默认10
				mescroll.formdata.txtKey=this.searchVal;
				this.$minApi.GetDataTable({
					data: mescroll.formdata
				}).then(res => {
					if (res.Status === 1) {
						// 接口返回的当前页数据列表 (数组)
						let curPageData = JSON.parse(res.Data);
						// 接口返回的总页数 (比如列表有26个数据,每页10条,共3页; 则totalPage值为3)
						let totalPage = 100 //res.data.length
						// 接口返回的总数据量(比如列表有26个数据,每页10条,共3页; 则totalSize值为26)
						let totalSize = 10000; //res.data.length
						// 接口返回的是否有下一页 (true/false)
						// let hasNext = res.hasNextPage
			
						if (mescroll.num == 1) this.cardList = [] //如果是第一页需手动置空列表
						this.cardList = this.cardList.concat(curPageData) //追加新数据
			
						// 成功隐藏下拉加载状态
						// 方法一(推荐): 后台接口有返回列表的总页数 totalPage
						mescroll.endByPage(curPageData.length, totalPage)
						this.$nextTick(() => {
							mescroll.endSuccess(curPageData.length)
						})
					} else {
						mescroll.endErr();
					}
				}).catch(exp => {
					// 失败隐藏下拉加载状态
					//console.log(exp);
					mescroll.endErr()
				})
			},
			search() {
				this.upCallback(this.mescroll);
			},
			//清空搜关键字
			clearSearch() {
				this.searchVal = '';
				this.downCallback(this.mescroll);
			},
		}
	}
</script>

<style lang="scss">
page,.container{
	height: 100%;
}
/* 容器 */
.container{
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: flex-start;
	align-content: flex-start;
	
	&>view{
		width: 100%;
	}
	
	.scroll-panel{
		flex-grow: 1;
		height: 0;
		overflow: hidden;
	}
	
	.bottom-panel{
		padding-bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);  
		padding-bottom: env(safe-area-inset-bottom);		
	}
}
	
.list-box{
	display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
	font-size: 28rpx;
	
	.left{
		width: 200rpx;
		background-color: #f6f6f6;
		line-height: 80rpx;
		box-sizing: border-box;
		font-size: 32rpx;
		
		.item{
			padding-left: 20rpx;
			position: relative;
			line-height: 80rpx;
			&:not(:first-child) {
				margin-top: 1px;
			
				&::after {
					content: '';
					display: block;
					height: 0;
					border-top: #d6d6d6 solid 1px;
					width: 620upx;
					position: absolute;
					top: -1px;
					right: 0;
					transform:scaleY(0.5);	/* 1px像素 */
				}
			}
			
			&.active,&:active{
				color: #42b983;
				background-color: #fff;
			}
		}
	}
	.main{
		background-color: #fff;
		padding-left: 20rpx;
		width: 0;
		flex-grow: 1;
		box-sizing: border-box;
		
		.swiper{
			height: 500px;
		}

		.title{
			line-height: 64rpx;
			font-size: 24rpx;
			font-weight: bold;
			color: #666;
			background-color: #fff;
			position: sticky;
			top: 0;
			z-index: 999;
		}
		
		.item{
			padding-bottom: 10rpx;
		}
		
		.goods{
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			justify-content: flex-start;
			align-items: center;
			align-content: center;
			margin-bottom: 10rpx;
			
			&>image{
				width: 120rpx;
				height: 120rpx;
				margin-right: 16rpx;
				margin-left: 2px;
			}
			
			.describe{
				font-size: 24rpx;
				color: #999;
			}
			
			.money{
				font-size: 24rpx;
				color: #efba21;
			}
		}
	}
}
</style>
